<template>
  <el-dialog :title="titleName+'-预约的区角'" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="700px">
<!--    <div class="table-body-box">-->
          <div class="breadcrumb-container">
        <div class="search_box">
          <el-date-picker
              v-model="time"
              type="date"
              placeholder="选择查询日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small">
          </el-date-picker>
        </div>
        <el-button type="primary" @click="InitFn" size="small"><i class="el-icon-search"></i>搜索</el-button>
        <el-button size="small" @click="updateTime"><i class="el-icon-refresh"></i>重置</el-button>
        <span class="allbook">总 {{ arryList.length }} 条数据</span>
      </div>
    <el-table :data="arryList"
              height="400"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              ref="table">
      <el-table-column
          prop="id"
          label="ID"
          width="90"
          align="center">
      </el-table-column>
      <el-table-column label="区角名称" align="center">
        <template slot-scope="scope">
          {{scope.row.corner.name}}
        </template>
      </el-table-column>
<!--      <el-table-column label="预约时间" prop="create_time" align="center"></el-table-column>-->
      <el-table-column label="参与时间" prop="use_time" align="center"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">返 回</el-button>
<!--      <el-button type="primary" @click="submitCheckFn" size="small">确 定</el-button>-->
    </div>
  </el-dialog>
</template>

<script>
  import {tableoption} from '@/utils/util.js'

  export default {
    name: 'studentMultiple',
    props: ['visible', 'userOption'],
    data () {
      return {
        titleName: '',
        dialogVisible: this.visible,
        // 设置table样式
        tableStyle: tableoption,
        time: '',
        arryList: []
      }
    },
    watch: {
      visible () {
        this.dialogVisible = this.visible
        console.log('this.visible:', this.visible)
        if (this.visible) {
          console.log('收到的学生信息:', this.userOption)
          this.titleName = this.userOption.name
          this.updateTime()
        }else{
          this.arryList = []
        }
      }
    },
    created () {
    },
    methods: {
      updateTime() {
        let cd = new Date()
        this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
        this.time = this.Weekdate;
        this.InitFn()
      },
      zeroPadding(num, digit) {
        let zero = ''
        for (let i = 0; i < digit; i++) {
          zero += '0'
        }
        return (zero + num).slice(-digit)
      },
      // 初始化
      InitFn () {
        // type 0 之前 1 之后
        let data_ = {}
        data_.time = this.time
        data_.student_id = this.userOption.id
        this.$fetch(this.api.admin_corner_apply_apply_user, data_).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      submitCheckFn () {
        console.log('applyBookBox:', this.applyBookBox)
        if (JSON.stringify(this.applyBookBox) === '{}') {
          this.$message({
            message: '请填特定的学生',
            type: 'error'
          })
        } else {
          this.$emit('studentFn', JSON.parse(JSON.stringify(this.applyBookBox)))
          this.dialogVisible = false
        }
      }
    },
    mounted () {
    }
  }
</script>
